<template>
  <div
    v-dragMove="{
      DragButton: '.mainFormTitle',
      DragWindow: '.mainForm',
    }"
  >
    <div class="window mainForm">
      <div
        :class="[
          'title-bar',
          'mainFormTitle',
          titleBarInactive ? 'inactive' : '',
        ]"
      >
        <img
          class="title-bar-img"
          src="@/assets/win98icons/computer_explorer-5.png"
        />
        <div class="title-bar-text">Equipment Issues</div>
        <div class="title-bar-controls">
          <button aria-label="Close"></button>
        </div>
      </div>
      <div class="window-body">
        <fieldset
          @mouseenter="mouseEvent('createArea')"
          @mouseleave="mouseEvent()"
        >
          <legend>Create New Issue</legend>
          <div class="inline-container">
            <div class="field-row inline">Equipment</div>
            <div class="field-row inline" v-for="item in equipmentList">
              <input
                :id="`radio_${item}`"
                type="radio"
                v-model="createInput.equipment"
                :value="item"
              />
              <label :for="`radio_${item}`">{{ item }}</label>
            </div>
          </div>
          <div class="inline-container">
            <div class="field-row inline">
              <label for="date_issue">Date & Time of Incident</label>
              <input id="date_issue" type="date" v-model="createInput.date" />
              <input id="time_issue" type="time" v-model="createInput.time" />
            </div>
            <!-- <div class="field-row inline">
              <label for="time_issue">Time of Incident</label>
              <input id="time_issue" type="time" v-model="createInput.time" />
            </div> -->
          </div>
          <div class="inline-container">
            <button @click="doCreate()">Create</button>
          </div>
        </fieldset>
        <fieldset
          @mouseenter="mouseEvent('queryArea')"
          @mouseleave="mouseEvent()"
        >
          <legend>Query Issue Records</legend>
          <div>
            <div class="inline-container">
              <div class="field-row inline">
                <label for="date_start">Start Date</label>
                <input id="date_start" type="date" v-model="queryInput.start" />
              </div>
              <div class="field-row inline">
                <label for="date_end">End Date:</label>
                <input id="date_end" type="date" v-model="queryInput.end" />
              </div>
            </div>
            <div class="inline-container">
              <div class="field-row inline">Equipments</div>
              <div class="field-row inline" v-for="item in equipmentList">
                <input
                  type="checkbox"
                  :id="`checkbox_${item}`"
                  :value="item"
                  v-model="queryInput.equipments"
                />
                <label :for="`checkbox_${item}`">{{ item }}</label>
              </div>
            </div>
            <div class="inline-container">
              <button @click="doQuery()">Query</button>
            </div>
          </div>
        </fieldset>
      </div>
      <div class="status-bar">
        <!-- <p class="status-bar-field" style="width: 36px; text-align: center">说明</p> -->
        <!-- <p class="status-bar-field" style="width: 100%">{{ helpMessage }}</p> -->
        <p class="status-bar-field">说明：{{ helpMessage }}</p>
      </div>
    </div>
  </div>
  <CreateForm ref="createForm" @close="handleSubFromClose()" />
  <QueryForm ref="queryForm" @close="handleSubFromClose()" />
</template>

<script setup>
import { ref, computed, nextTick, onMounted, onUnmounted, h } from "vue";
import dayjs from "dayjs";
import { ElMessageBox } from "element-plus";
import CreateForm from "./CreateForm.vue";
import QueryForm from "./QueryForm.vue";

const createForm = ref();
const queryForm = ref();

const equipmentList = ref(["INDRA", "AIRNET", "Frequentis", "SIPDS", "Other"]);

const createInput = ref({
  date: "",
  time: "",
  equipment: "AIRNET",
});

const queryInput = ref({
  start: "",
  end: "",
  equipments: [],
});

const doCreate = () => {
  titleBarInactive.value = true;
  createForm.value.open(createInput.value);
};

const doQuery = () => {
  titleBarInactive.value = true;
  queryForm.value.open(queryInput.value);
};

const helpMessage = ref("无");

const mouseEvent = (target) => {
  if (target == "createArea") {
    helpMessage.value =
      "新建设备问题记录，请先选择设备类型、填写问题发生时间，然后点击Create（创建）";
  } else if (target == "queryArea") {
    helpMessage.value =
      "检索设备问题记录，请选择需要检索的时间范围、设备类型，然后点击Query（检索）";
  } else {
    helpMessage.value = "无";
  }
};

const titleBarInactive = ref(false);
const handleSubFromClose = () => {
  titleBarInactive.value = false;
};

onMounted(() => {
  queryInput.value.start = new dayjs().format("YYYY-MM-DD");
  queryInput.value.end = new dayjs().format("YYYY-MM-DD");
  queryInput.value.equipments = equipmentList.value.join(",").split(",");
  createInput.value.date = new dayjs().format("YYYY-MM-DD");
  createInput.value.time = new dayjs().format("HH:mm");
  createInput.value.equipment = "AIRNET";
});
</script>

<style scoped>
@import "@/styles/98.css";
@import "@/styles/98custom.css";

.mainForm {
  width: 100%;
  max-width: 550px;
}
</style>
